'use client'

import { Modal } from '@mui/material'
import Box from '@mui/material/Box'
import { useTheme } from '@mui/material/styles'
import { useRouter } from 'next/navigation'
import type { PropsWithChildren } from 'react'

export function ModalLayout({ children }: PropsWithChildren) {
	const router = useRouter()
	const theme = useTheme()

	const handleClose = () => {
		router.back()
	}
	return (
		<Modal
			open={true}
			onClose={handleClose}
			sx={{
				backdropFilter: 'blur(2px)'
			}}
		>
			<Box
				sx={{
					position: 'absolute' as 'absolute',
					top: '50%',
					transform: 'translate(0, -50%)',
					[theme.breakpoints.up('md')]: {
						left: '50%',
						transform: 'translate(-50%, -50%)'
					}
				}}
			>
				{children}
			</Box>
		</Modal>
	)
}
